<template>
	<view class="page_content">
		<view class="title">
			<u-icon class="icons" name="arrow-left" color="white" size="40" @click="toBack"></u-icon>
			<image class="images"
				src="https://hbplaylet.oss-cn-hangzhou.aliyuncs.com/system/image/20240329/1711697968898q.jpg" mode="">
			</image>
		</view>
		<view class="main">
			<view class="main_title">
				签到打卡
			</view>
			<view class="main_center">
				<view class="main_center_left">
					<text>签到</text>
					<text>{{signCount}}天</text>
				</view>
				<view class="main_center_right" @click="clickHoliday">请假</view>
			    <view class="main_center_right" @click="getClickDetail">详情</view>
				<view class="main_center_right" @click="clickSign">签到打卡</view>
			</view>
			<!-- 日历组件 -->
			<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false"
				@monthSwitch="monthSwitch" @change="change" />

		</view>
	</view>
	
	
</template>

<script>
	import {
		sign,
		signList,
		holiday,
		clockDetail
	} from '@/api/member.js'

	import {
		getNowTime,
		fillZero
	} from '@/utils/date.js'

	// 获取时间 付
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		data() {
			return {
				currentYear: '', // 当前年
				currentMonth: '', // 当前月
				signList: [], // 签到列表
				signCount: [], // 打卡总数
				integralNum: [], // 今日签到多少豆
				showStart: false,
				showEnd: false,
				showData: false,
				clockTime: '',
				startTime: '',
				endTime: '',
				timeInterval: '',
				info: { // 组件信息
					lunar: true,
					range: true,
					insert: false,
					selected: [] // 签到天数
				},
			}
		},
		onLoad() {
			this.clockTime = getDate().fullDate + " 00:00:00"; // 获取时间
			console.log("onlaod事件获取当前时间：" + this.clockTime)
			this.currentYear = new Date().getFullYear() + ''; // 获取年
			this.currentMonth = (new Date().getMonth() + 1).toString().padStart(2, '0'); // 获取月 补零
			this.getList()
		},
		methods: {
			// endChange
			change(e) {
				console.log('change 返回:', e)
				this.clockTime = e.fulldate + " 00:00:00"
				console.log('clockTime 时间:' + this.clockTime)
			},
			confirm() {
				this.showEnd = false
				this.showStart = false
				this.showData = false
			},
			cancel() {
				this.showEnd = false
				this.showStart = false
				this.showData = false
			},
			// 签到列表
			getList() {
				signList({
					year: this.currentYear,
					month: this.currentMonth,
				}).then(res => {
					this.signList = res.data.signInfoVOList
					this.signCount = res.data.signCount
					this.integralNum = res.data.integralNum
					let arr = []
					this.signList.forEach(item => {
						if (item.signDate == getDate(new Date()).fullDate) this.textFalg =
							'今日已签到' // 判断是否签到
						//  // 组件需要的数据格式		
						if (item.type == 1) {
							arr.push({
								date: item.signDate,
								info: '已签到'
							})
						} else if (item.type == 2 ) {
							arr.push({
								date: item.signDate,
								info: '已请假'
							})

						} else {
							arr.push({
								date: item.signDate,
								info: '旷卡'
							})
						}
					})
					// 展示签到信息
					setTimeout(() => {
						this.info.date = getDate(new Date(), -30).fullDate
						this.info.startDate = getDate(new Date(), -60).fullDate
						this.info.endDate = getDate(new Date(), 30).fullDate
						this.info.selected = arr
					}, 500)

				})
			},
			// 点击签到
			clickSign() {
				uni.showModal({
					title: '请输入打坐时长',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '请输入打坐时长(单位:分钟)', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
						   console.log('输入的内容：', res.content)						   
						   this.timeInterval = res.content;
							sign({
								date: this.clockTime,
								timeInterval: this.timeInterval
							}).then(res => {
								this.$u.toast('成功签到');
								this.getList()
							}).catch(err => {
								uni.showModal({
									title: '打卡失败',
									content: err.data.message,
									showCancel: false,
								});
							})
				 
						}
					}
				});

			},
			// 点击请假
			clickHoliday() {
				holiday({
					date: this.clockTime
				}).then(res => {
					this.$u.toast('成功请假');
					this.getList()
				}).catch(err => {
					uni.showModal({
						title: '请假失败',
						content: err.data.message,
						showCancel: false,
					});
				})
			},
			getClickDetail() {
				clockDetail({
					date: this.clockTime
				}).then(res => {
					uni.showModal({
						title: '记录详情',
						content: res.data,
						showCancel: false,
					});
				}).catch(err => {
					uni.showModal({
						title: '详情获取失败',
						content: err.data.message,
						showCancel: false,
					});
				})
 
			},
			
			// 月份选择
			monthSwitch(e) {
				console.log("月份选择：" + e.date)
				this.currentYear = e.year
				this.currentMonth = e.month.toString().padStart(2, '0')
				this.getList()
			},
			// 返回上一页
			toBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.calendar-button {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}

	.popup {
		width: 600rpx;
		height: 600rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.popup_title {
			padding-top: 50rpx;
			text-align: center;
		}

		.popup_main {
			display: flex;
			margin-top: 40rpx;
			padding: 0 0 30rpx 30rpx;
			border-bottom: 1px solid black;

			.popup_main_left {
				width: 160rpx;
			}
		}
	}

	.title {
		width: 428px;
		height: 248px;

		.icons {
			margin: 94rpx 0 0 38rpx;
		}

		.images {
			width: 428px;
			height: 248px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -2;
		}
	}

	.main {
		width: 700rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 11rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 18rpx;
		margin: -90rpx auto 0 auto;

		.main_title {
			font-size: 35rpx;
			font-weight: 400;
			color: #777777;
			padding: 28rpx;
		}

		.main_center {
			height: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 28rpx;

			.main_center_left {
				text:nth-child(1) {
					font-size: 28rpx;
					color: #777777;
				}

				text:nth-child(2) {
					margin-left: 20rpx;
					font-size: 28rpx;
					color: $uni-color;
				}
			}

			.main_center_right {
				width: 160rpx;
				line-height: 47rpx;
				font-size: 21rpx;
				color: #FFFFFF;
				border-radius: 30rpx;
				background-color: $uni-color;
				text-align: center;
			}
		}
	}
</style>